
<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			textarea {
				min-width: 200px;
				min-height: 200px;
				resize: none;
			}
		</style>
	</head>

	<body>
		<textarea></textarea> 
		剩余字数:<span></span>
		<script type="text/javascript">
			/*
			 * 在textarea里面输入任意信息的同时在span里面输出剩余的字数(最大字数长度为200)
			 * 当用户输入字数超过200时,不能让用户输入,但用户删除文字后,可以继续输入
			 */
			 var textarea = document.querySelector('textarea');
			 var span = document.querySelector('span');
			 var leave;
			 span.innerHTML = 200;
			 textarea.addEventListener('input', function (e) {
			 	leave = 200 - parseInt(this.value.length);
			 	span.innerHTML = ( leave < 0) ? 0 : leave;
			 	if ( this.value.length > 200 ){
			 		this.readOnly = true;
			 		console.log(this.disabled);
			 	}

			 });

			 document.addEventListener('keydown',function (e) {
			 	if ( e.keyCode == 8 ) {
			 		textarea.readOnly = false;
			 	}
			 })
		</script>
	</body>

</html>